<template>
<div class="SourceItem">
     <img :src="sourceItem.avartURL" alt="" class="lf-logo">
     <div class="rt-content">
         <h6>{{sourceItem.showName}}</h6>
         <div class="text">
             {{sourceItem.content}}
           </div>
         <div class="img">
             <img :src="item" alt="" v-for="item in sourceItem.imgs" :key="item" @load="imgClick">
         </div>
         <div class="footer">
             <div class="date">{{sourceItem.createTime}}</div>
              <div class="dz">赞{{sourceItem.clickCount}}</div>
              <div class="dz">转发{{sourceItem.shareCount}}</div>
              <div>
                  <slot></slot>
              </div>
         </div>
     </div>
</div>
</template>

<script>
export default {
name:'SourceItem',
data() {
return {
}
},
props:{
    sourceItem:{
        type:Object,
        default(){
            return {}
        }
    } 
},
//生命周期 - 创建完成（访问当前this实例）
created() {

},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {

},
methods: {
    imgClick(){ 
    // 发一个事件
     this.$bus.$emit('loadImg');
    }
},
}
</script>
<style scoped lang='less'>
.SourceItem{
    display: flex;
    margin-bottom: 18px;
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 10px;
    .lf-logo{
        height:62px;
        width: 57px;
        border-radius: 2px;
        margin-right: 20px;
    }
    .rt-content{
        flex: 1;
        h6{
            font-size:16px;
            color: var(--size_color);
            padding-bottom: 10px;
        }
        .text{
            font-size:15px;
            color: #333;
            line-height: 1.5;
        }
        .img{
            display: flex;
            flex-wrap:wrap;
            justify-content:start;
            img{
                height:80px;
                width:80px;
                margin: 3px 6px 3px 0;
            }
        }
        .footer{
            display: flex;
            justify-content:space-between;
            color:#999;
            font-size:13px;
            padding-top:20px;
        }
    }
}
</style>